<template>
  <div class="main-page">
    <div class="page-title">
      <span>工程项目监测分析</span>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="8">
          <div class="commercial-housing-construction-area-statistics">
            <div class="main-content-gird-title">
              <p>商品房开工面积统计</p>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.commercialHousingConstructionAreaStatisticsCity" @changeCity="(event) => changeCity(event, 'commercialHousingConstructionAreaStatistics')"></public-change-province-city>
            </div>
            <div class="commercial-housing-construction-area-statistics-chart">
              <time-filtrate-public :isAreaSelectShow="false"
                                    @changeFiltrateTime="commercialHousingConstructionAreaStatisticsChangeFiltrateTime"></time-filtrate-public>
              <bar v-if="commercialHousingConstructionAreaStatisticsData?.xAxisData?.length"
                   ref="commercialHousingConstructionAreaStatisticsRef"
                   :barData="commercialHousingConstructionAreaStatisticsData" class="h240"
                   @click="fullSc('bar', commercialHousingConstructionAreaStatisticsData)"
              ></bar>
            </div>
          </div>
          <div class="state-land">
            <div class="main-content-gird-title">
              <p>国有土地使用权出让面积及出让金总额统计</p>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.stateLandCity" @changeCity="(event) => changeCity(event, 'stateLand')"></public-change-province-city>
            </div>
            <div class="state-land-chart">
              <time-filtrate-public :isAreaSelectShow="false"
                                    @changeFiltrateTime="stateLandChangeFiltrateTime"></time-filtrate-public>
              <bar v-if="stateLandData?.xAxisData?.length" ref="stateLandRef" :barData="stateLandData"
                   class="h240" @click="fullSc('bar', stateLandData)"></bar>
            </div>
          </div>
          <div class="city-area-under-construction-statistics">
            <div class="main-content-gird-title">
              <p>各市在建面积统计</p>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.cityAreaUnderConstructionStatisticsCity" @changeCity="(event) => changeCity(event, 'cityAreaUnderConstructionStatistics')"></public-change-province-city>
            </div>
            <div class="city-area-under-construction-statistics-chart">
              <time-filtrate-public :isAreaSelectShow="false"
                                    @changeFiltrateTime="cityAreaUnderConstructionStatisticsChangeFiltrateTime"></time-filtrate-public>
              <bar v-if="cityAreaUnderConstructionStatisticsData?.xAxisData?.length" ref="cityAreaUnderConstructionStatisticsRef" :barData="cityAreaUnderConstructionStatisticsData"
                   class="h240" @click="fullSc('bar', cityAreaUnderConstructionStatisticsData)"></bar>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="position: relative; padding: 0">
          <div class="middle-map">
            <map-box
                :listData="mapList"
                :mapConfig="{layoutSize: '140%', currentCity: cityObj.code}"
                @mapNameChange="mapNameChange"
            ></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
          </div>
          <div class="project-basic-info">
            <el-row :gutter="20">
              <el-col :span="8" v-for="colItem of projectBasicInfo">
                <div class="col-item">
                  <el-image :src="colItem.imgUrl" fit="fill"/>
                  <div class="label">{{colItem.label}}</div>
                  <div class="value">{{projectDetail[colItem.valueKey] || '--'}}{{colItem.unit}}</div>
                </div>
              </el-col>
            </el-row>
            <public-change-province-city :cityList="mapList" :currentCity="cityConfig.projectBasicInfoCity" @changeCity="(event) => changeCity(event, 'projectBasicInfo')"></public-change-province-city>
          </div>
          <div class="money-and-flow-anomalies">
            <div class="main-content-gird-title">
              <p>资金及流向异常情况</p>
            </div>
            <div class="money-and-flow-anomalies-list">
              <table-list :tableData="tableListData" :tablePaginationInfo="tableInfo"
                                    :columnData="tableColumnData" @changePageNum="changeTablePage"></table-list>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="project-annual-presale-funds-supervision">
            <div class="main-content-gird-title">
              <p>年度预售资金监管情况</p>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.projectAnnualPresaleFundsSupervisionCity" @changeCity="(event) => changeCity(event, 'projectAnnualPresaleFundsSupervision')"></public-change-province-city>
            </div>
            <div class="project-annual-presale-funds-supervision-chart">
              <div class="developer-name-search">
                <el-autocomplete
                    class="developer-name-search-autocomplete"
                    popper-class="developer-name-search-autocomplete-popper"
                    v-model="developerName"
                    :fetch-suggestions="developerNameSearchRemoteMethod"
                    placeholder="请输入开发商名称"
                    clearable
                />
                <div class="developer-name-search-btn" @click="searchDeveloperInfo">查询</div>
              </div>
              <single-line
                  v-if="projectAnnualPresaleFundsSupervisionData?.xAxisData?.length"
                  ref="projectAnnualPresaleFundsSupervisionRef"
                  :lineData="projectAnnualPresaleFundsSupervisionData"
                  class="h240"
                  @click="fullSc('singleLine', projectAnnualPresaleFundsSupervisionData)"
              ></single-line>
            </div>
          </div>
          <div class="housing-enterprises-petition-event-abnormal-situation">
            <div class="main-content-gird-title">
              <p>房企信访事件异常情况</p>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.housingenterprisesPetitionEventAbnormalSituationCity" @changeCity="(event) => changeCity(event, 'housingenterprisesPetitionEventAbnormalSituation')"></public-change-province-city>
            </div>
            <div class="housing-enterprises-petition-event-abnormal-situation-chart">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="most-petition-event-developers-ranking" style="position: relative">
                    <div class="pubilc-chart-title">信访事件最多开发商排名</div>
                    <bar-ranking
                        v-if="mostPetitionEventDevelopersRankingData.yAxisData?.length"
                        ref="mostPetitionEventDevelopersRankingRef"
                        :barData="mostPetitionEventDevelopersRankingData" :intervalData="{
                          currentBarIndex: mostPetitionEventDevelopersRankingData.currentBarIndex
                        }" class="h220"
                        @click="fullSc('barRanking', mostPetitionEventDevelopersRankingData)"
                    ></bar-ranking>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="petition-event-reason-statistics public-pie" style="position: relative">
                    <div class="pubilc-chart-title">信访事件原因统计</div>
                    <month-range-time-filtrate-public class="public-pie-month-range" @changeFiltrateTime="petitionEventReasonStatisticsChangeFiltrateTime"></month-range-time-filtrate-public>
                    <pie
                        v-if="petitionEventReasonStatisticsData.seriesData?.length"
                        ref="petitionEventReasonStatisticsRef"
                        :pieData="petitionEventReasonStatisticsData"
                        class="h220"
                        @click="fullSc('pie', petitionEventReasonStatisticsData)"
                    ></pie>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="project-safe-event-statistics public-pie" style="position: relative">
                    <div class="pubilc-chart-title">项目安全事件统计</div>
                    <month-range-time-filtrate-public class="public-pie-month-range" @changeFiltrateTime="projectSafeEventStatisticsChangeFiltrateTime"></month-range-time-filtrate-public>
                    <pie
                        v-if="projectSafeEventStatisticsData.seriesData?.length"
                        ref="projectSafeEventStatisticsRef"
                        :pieData="projectSafeEventStatisticsData"
                        class="h220"
                        @click="fullSc('pie', projectSafeEventStatisticsData)"
                    ></pie>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="housing-enterprise-project-progress-abnormal-statistics public-pie" style="position: relative">
                    <div class="pubilc-chart-title">房企项目进度异常统计</div>
                    <month-range-time-filtrate-public class="public-pie-month-range" @changeFiltrateTime="housingEnterpriseProjectProgressAbnormalStatisticsChangeFiltrateTime"></month-range-time-filtrate-public>
                    <pie
                        v-if="housingEnterpriseProjectProgressAbnormalStatisticsData.seriesData?.length"
                        ref="housingEnterpriseProjectProgressAbnormalStatisticsRef"
                        :pieData="housingEnterpriseProjectProgressAbnormalStatisticsData"
                        class="h220"
                        @click="fullSc('pie', housingEnterpriseProjectProgressAbnormalStatisticsData)"
                    ></pie>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
          v-if="magnifyData.dialogVisible"
          ref="dialogRef"
          :is="magnifyData.componentName"
          :dialogData="{fontSizeTimes: 2}"
          v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import bar from "@/components/projectMonitoringAnalysis/bar.vue";
import singleLine from "@/components/projectMonitoringAnalysis/singleLine.vue";
import barRanking from "@/components/projectMonitoringAnalysis/barRanking.vue";
import pie from '@/components/projectMonitoringAnalysis/pie.vue';

export default {
  components: {
    bar,
    singleLine,
    barRanking,
    pie,
  }
}
</script>

<script setup>
import {onMounted, ref, watch, onBeforeMount} from "vue";

import timeFiltratePublic from "@/components/housePropertyAnalysis/timeFiltratePublic.vue";
import mapBox from "@/components/projectMonitoringAnalysis/map.vue";
import tableList from "@/components/projectMonitoringAnalysis/tableList.vue";
import monthRangeTimeFiltratePublic from "@/components/projectMonitoringAnalysis/timeFiltratePublic.vue";
import publicChangeProvinceCity from "@/components/projectMonitoringAnalysis/publicChangeProvinceCity.vue";

import {
  getproMonitoringConstructionAreaStats, // 商品房开工面积统计-bar
  getproMonitoringLandAreaAndMoney, // 国有土地使用权出让面积及出让金总额统计
  getproMonitoringConstructionArea, // 各市在建面积统计
  getproMonitoringProjectDetails, // 根据区域获取工程项目详情
  getproMonitoringTrackFundFlowAnomalies, // 资金及流向异常情况
  getproMonitoringFundSupervision, // 获取年度预售资金监管情况
  getproMonitoringPetitionCaseException, // 房企信访事件异常情况-信访时间最多开发商排名
  getproMonitoringComplaintEventReasons, // 房企信访事件异常情况-信访事件原因统计
  getproMonitoringSecurityIncident, // 房企信访事件异常情况-项目安全事件统计
  getproMonitoringProgressDeviation, // 房企信访事件异常情况-房企项目进度异常统计
  getProMonitoringGetDevelopers, // 年度预售资金监管情况-远程搜索
} from "@/api/projectMonitoringAnalysis/index";
import projectBasicInfo1 from "@/assets/img/projectMonitoringAnalysis/project-basic-info-1.png";
import projectBasicInfo2 from "@/assets/img/projectMonitoringAnalysis/project-basic-info-2.png";
import projectBasicInfo3 from "@/assets/img/projectMonitoringAnalysis/project-basic-info-3.png";

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})
const dialogRef = ref(null) // chart图放大-domref

const cityObj = ref({
  name: '',
  code: ''
}) // 地图-市名
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: {disabled: false}, selected: false},
  {name: '大连市', value: 0, code: '210200', select: {disabled: false}, selected: false},
  {name: '鞍山市', value: 0, code: '210300', select: {disabled: false}, selected: false},
  {name: '抚顺市', value: 0, code: '210400', select: {disabled: false}, selected: false},
  {name: '本溪市', value: 0, code: '210500', select: {disabled: false}, selected: false},
  {name: '丹东市', value: 0, code: '210600', select: {disabled: false}, selected: false},
  {name: '锦州市', value: 0, code: '210700', select: {disabled: false}, selected: false},
  {name: '营口市', value: 0, code: '210800', select: {disabled: false}, selected: false},
  {name: '阜新市', value: 0, code: '210900', select: {disabled: false}, selected: false},
  {name: '辽阳市', value: 0, code: '211000', select: {disabled: false}, selected: false},
  {name: '盘锦市', value: 0, code: '211100', select: {disabled: false}, selected: false},
  {name: '铁岭市', value: 0, code: '211200', select: {disabled: false}, selected: false},
  {name: '朝阳市', value: 0, code: '211300', select: {disabled: false}, selected: false},
  {name: '葫芦岛市', value: 0, code: '211400', select: {disabled: false}, selected: false},
])
const currentYear = ref(null) // 当前年份

const cityConfig = ref({ // 模块顶部城市筛选
  commercialHousingConstructionAreaStatisticsCity: cityObj.value.code, // 商品房开工面积统计-city
  stateLandCity: cityObj.value.code, // 国有土地使用权出让面积及出让金总额统计-city
  cityAreaUnderConstructionStatisticsCity: cityObj.value.code, // 各市在建面积统计-city
  projectBasicInfoCity: cityObj.value.code, // 项目详情基本信息-city
  projectAnnualPresaleFundsSupervisionCity: cityObj.value.code, // 年度预售资金监管情况-city
  housingenterprisesPetitionEventAbnormalSituationCity: cityObj.value.code // 房企信访事件异常情况-city
})

const commercialHousingConstructionAreaStatisticsData = ref({ //  商品房开工面积统计-data
  xAxisData: [],
  seriesData: []
})
const commercialHousingConstructionAreaStatisticsRef = ref(null) // 商品房开工面积统计-domref
const housePropertySalesTrendNewSalesStatisticsTimeConfig = ref({ // 商品房开工面积统计-顶部默认筛选
  type: 2,
  startTime: '',
  endTime: ''
})

const stateLandData = ref({ //  国有土地使用权-data
  xAxisData: [],
  seriesData: []
})
const stateLandRef = ref(null) // 国有土地使用权-domref
const stateLandTimeConfig = ref({ // 国有土地使用权-顶部默认筛选
  type: 2,
  startTime: '',
  endTime: ''
})

const cityAreaUnderConstructionStatisticsData = ref({ //  各市在建面积统计-data
  xAxisData: [],
  seriesData: []
})
const cityAreaUnderConstructionStatisticsRef = ref(null) // 各市在建面积统计-domref
const cityAreaUnderConstructionStatisticsTimeConfig = ref({ // 各市在建面积统计-顶部默认筛选
  type: 2,
  startTime: '',
  endTime: ''
})

const projectBasicInfo = ref([ // 项目详情基本信息-configuration
  {
    id: 1,
    label: '工程涉及人员',
    valueKey: 'gcsjrys',
    unit: '',
    imgUrl: projectBasicInfo1
  },
  {
    id: 2,
    label: '工程资金(万元)',
    valueKey: 'gczj',
    unit: '万元',
    imgUrl: projectBasicInfo2
  },
  {
    id: 3,
    label: '项目周期',
    valueKey: 'xmzq',
    unit: '天',
    imgUrl: projectBasicInfo3
  },
])
const projectDetail = ref({}) // 项目基本详情-data

const tableListData = ref([]) // 列表tablelist
const tableColumnData = ref([]) // 列表columnlist
const tableInfo = ref({ // 列表-分页-table信息
  total: 0,
  currentPage: 1
})

const developerName = ref('') // 年度预售资金监管情况-开发商名称
const projectAnnualPresaleFundsSupervisionData = ref({ //  年度预售资金监管情况-data
  xAxisData: [],
  seriesData: []
})
const projectAnnualPresaleFundsSupervisionRef = ref(null) // 年度预售资金监管情况-domref

const mostPetitionEventDevelopersRankingData = ref({ // 信访事件最多开发商排名-data
  yAxisData: [],
  seriesData: [],
  currentBarIndex: 0,
  interval: null
})
const mostPetitionEventDevelopersRankingRef = ref(null) // 信访事件最多开发商排名-domref
watch( // 信访事件最多开发商排名-bar图-滚动监听
    () => mostPetitionEventDevelopersRankingData.value.currentBarIndex,
    (newVal) => {
      if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'barRanking') {
        magnifyData.value.props.intervalData.currentBarIndex = newVal
      }
    }
)

const petitionEventReasonStatisticsData = ref({ // 房企信访事件异常情况-信访事件原因统计
  seriesData: [],
})
const petitionEventReasonStatisticsRef = ref(null) // 企信访事件异常情况-信访事件原因统计-domref
const petitionEventReasonStatisticsTimeConfig = ref([]) // 企信访事件异常情况-信访事件原因统计-月范围默认筛选

const projectSafeEventStatisticsData = ref({ // 房企信访事件异常情况-项目安全事件统计
  seriesData: [],
})
const projectSafeEventStatisticsRef = ref(null) // 企信访事件异常情况-项目安全事件统计-domref
const projectSafeEventStatisticsTimeConfig = ref([]) // 企信访事件异常情况-项目安全事件统计-月范围默认筛选

const housingEnterpriseProjectProgressAbnormalStatisticsData = ref({ // 房企信访事件异常情况-房企项目进度异常统计
  seriesData: [],
})
const housingEnterpriseProjectProgressAbnormalStatisticsRef = ref(null) // 企信访事件异常情况-房企项目进度异常统计-domref
const housingEnterpriseProjectProgressAbnormalStatisticsTimeConfig = ref([]) // 企信访事件异常情况-房企项目进度异常统计-月范围默认筛选

const commercialHousingConstructionAreaStatisticsChangeFiltrateTime = (item) => { // 商品房开工面积统计-顶部时间筛选
  publicChangeFiltrateTime(housePropertySalesTrendNewSalesStatisticsTimeConfig.value, item);
  getCommercialHousingConstructionAreaStatisticsData(cityConfig.value.commercialHousingConstructionAreaStatisticsCity, housePropertySalesTrendNewSalesStatisticsTimeConfig.value)
}

const stateLandChangeFiltrateTime = (item) => { // 国有土地-顶部时间筛选
  publicChangeFiltrateTime(stateLandTimeConfig.value, item);
  getStateLandData(cityConfig.value.stateLandCity, stateLandTimeConfig.value)
}

const cityAreaUnderConstructionStatisticsChangeFiltrateTime = (item) => { // 各市在建面积统计-顶部时间筛选
  publicChangeFiltrateTime(cityAreaUnderConstructionStatisticsTimeConfig.value, item);
  getCityAreaUnderConstructionStatisticsData(cityConfig.value.cityAreaUnderConstructionStatisticsCity, cityAreaUnderConstructionStatisticsTimeConfig.value)
}

const getCommercialHousingConstructionAreaStatisticsData = (cityCode, timeConfig) => { // 商品房开工面积统计-getdata
  const tempTimeArray = publicFiltrateTimeApiParams(timeConfig);
  getproMonitoringConstructionAreaStats({
    adcode: cityCode,
    dateType: timeConfig.type,
    startTime: tempTimeArray[0],
    endTime: tempTimeArray[1]
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      commercialHousingConstructionAreaStatisticsData.value.xAxisData = []
      commercialHousingConstructionAreaStatisticsData.value.seriesData = [[]]
      resData?.forEach(x => {
        commercialHousingConstructionAreaStatisticsData.value.xAxisData.push(x.regionName)
        commercialHousingConstructionAreaStatisticsData.value.seriesData[0].push(x.area)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    commercialHousingConstructionAreaStatisticsRef.value.updateChart();
  })
}

const getStateLandData = (cityCode, timeConfig) => { // 国有土地使用权-getdata
  const tempTimeArray = publicFiltrateTimeApiParams(timeConfig);
  getproMonitoringLandAreaAndMoney({
    adcode: cityCode,
    dateType: timeConfig.type,
    startTime: tempTimeArray[0],
    endTime: tempTimeArray[1]
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      stateLandData.value.xAxisData = []
      stateLandData.value.seriesData = [[], []]
      resData?.forEach(x => {
        stateLandData.value.xAxisData.push(x.regionName)
        stateLandData.value.seriesData[0].push(x.area)
        stateLandData.value.seriesData[1].push(x.price)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    stateLandRef.value.updateChart();
  })
}

const getCityAreaUnderConstructionStatisticsData = (cityCode, timeConfig) => { // 各市在建面积统计-getdata
  const tempTimeArray = publicFiltrateTimeApiParams(timeConfig);
  getproMonitoringConstructionArea({
    adcode: cityCode,
    dateType: timeConfig.type,
    startTime: tempTimeArray[0],
    endTime: tempTimeArray[1]
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      cityAreaUnderConstructionStatisticsData.value.xAxisData = []
      cityAreaUnderConstructionStatisticsData.value.seriesData = [[]]
      resData?.forEach(x => {
        cityAreaUnderConstructionStatisticsData.value.xAxisData.push(x.regionName)
        cityAreaUnderConstructionStatisticsData.value.seriesData[0].push(x.area)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    cityAreaUnderConstructionStatisticsRef.value.updateChart();
  })
}

const getProjectDetail = (cityCode) => { // 项目基本详情-getdata
  getproMonitoringProjectDetails({
    adcode: cityCode
  }).then(res => {
    const resData = res?.data
    if (resData) {
      projectDetail.value = resData
    }
  }).catch(error => {
    console.log(error);
  })
}

const initProjectAnnualPresaleFundsSupervision = (cityCode) => { // 获取年度预售资金监管情况-getdata
  getproMonitoringFundSupervision({
    adcode: cityCode,
    projectName: developerName.value || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      projectAnnualPresaleFundsSupervisionData.value.xAxisData = resData?.dateList
      projectAnnualPresaleFundsSupervisionData.value.seriesData = resData?.values
    } else {
      projectAnnualPresaleFundsSupervisionData.value.xAxisData = []
      projectAnnualPresaleFundsSupervisionData.value.seriesData = []
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (projectAnnualPresaleFundsSupervisionData.value.xAxisData?.length) {
      projectAnnualPresaleFundsSupervisionRef.value.updateChart();
    }
  })
}

const initMostPetitionEventDevelopersRanking = (cityCode) => { // 获取信访事件最多开发商排名-getdata
  getproMonitoringPetitionCaseException({
    adcode: cityCode
  }).then(res => {
    const resData = res?.data
    mostPetitionEventDevelopersRankingData.value.yAxisData = [];
    mostPetitionEventDevelopersRankingData.value.seriesData = [];
    if (resData?.length) {
      resData?.forEach(x => {
        mostPetitionEventDevelopersRankingData.value.yAxisData.push(x.kfsmc)
        mostPetitionEventDevelopersRankingData.value.seriesData.push(x.xfqks)
      })
    }
    publicInterval(mostPetitionEventDevelopersRankingData.value)
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (mostPetitionEventDevelopersRankingData.value.yAxisData?.length) mostPetitionEventDevelopersRankingRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'barRanking') {
      dialogRef.value.updateChart();
    }
  })
}

const initPetitionEventReasonStatisticsData = (cityCode) => { // 信访事件原因统计-getdata
  getproMonitoringComplaintEventReasons({
    adcode: cityCode,
    startTime: petitionEventReasonStatisticsTimeConfig.value[0] || undefined,
    endTime: petitionEventReasonStatisticsTimeConfig.value[1] || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      const tempValueArray = resData?.map(x => x.sum)
      const valueSum = tempValueArray.reduce((sum, num) => sum + num, 0)
      petitionEventReasonStatisticsData.value.seriesData = resData?.map(x => {
        return {
          name: x.typeName,
          value: x.sum,
          percentage: valueSum ? ((x.sum / valueSum) * 100).toFixed(2) : 0,
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (petitionEventReasonStatisticsData.value.seriesData?.length) petitionEventReasonStatisticsRef.value.updateChart();
  })
}

const initProjectSafeEventStatisticsData = (cityCode) => { // 项目安全事件统计-getdata
  getproMonitoringSecurityIncident({
    adcode: cityCode,
    startTime: projectSafeEventStatisticsTimeConfig.value[0] || undefined,
    endTime: projectSafeEventStatisticsTimeConfig.value[1] || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      const tempValueArray = resData?.map(x => x.sum)
      const valueSum = tempValueArray.reduce((sum, num) => sum + num, 0)
      projectSafeEventStatisticsData.value.seriesData = resData?.map(x => {
        return {
          name: x.typeName,
          value: x.sum,
          percentage: valueSum ? ((x.sum / valueSum) * 100).toFixed(2) : 0,
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (projectSafeEventStatisticsData.value.seriesData?.length) projectSafeEventStatisticsRef.value.updateChart();
  })
}

const initHousingEnterpriseProjectProgressAbnormalStatisticsData = (cityCode) => { // 房企项目进度异常统计-getdata
  getproMonitoringProgressDeviation({
    adcode: cityCode,
    startTime: housingEnterpriseProjectProgressAbnormalStatisticsTimeConfig.value[0] || undefined,
    endTime: housingEnterpriseProjectProgressAbnormalStatisticsTimeConfig.value[1] || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      const tempValueArray = resData?.map(x => x.sum)
      const valueSum = tempValueArray.reduce((sum, num) => sum + num, 0)
      housingEnterpriseProjectProgressAbnormalStatisticsData.value.seriesData = resData?.map(x => {
        return {
          name: x.typeName,
          value: x.sum,
          percentage: valueSum ? ((x.sum / valueSum) * 100).toFixed(2) : 0,
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (housingEnterpriseProjectProgressAbnormalStatisticsData.value.seriesData?.length) housingEnterpriseProjectProgressAbnormalStatisticsRef.value.updateChart();
  })
}

const publicChangeFiltrateTime = (data, {time, type}) => { // 公共处理-模块顶部公共筛选数据
  switch (type) {
    case 'month':
      data.type = 1
      data.startTime = time
      data.endTime = ''
      break;
    case 'year':
      data.type = 2
      data.startTime = time
      data.endTime = ''
      break;
    default: // monthRange
      data.type = 3
      data.startTime = time[0]
      data.endTime = time[1]
      break;
  }
}

const publicFiltrateTimeApiParams = (timeConfig) => { // 公共处理-接口入参格式化
  let tempTimeArray = []
  tempTimeArray.push(timeConfig.startTime)
  switch (timeConfig.type) {
    case 1:
    case 2:
      tempTimeArray.push(timeConfig.startTime)
      break;
    default:
      tempTimeArray.push(timeConfig.endTime)
      break;
  }
  return tempTimeArray
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '210000' : data.cityCode;
  cityConfig.value.commercialHousingConstructionAreaStatisticsCity = cityObj.value.code
  cityConfig.value.stateLandCity = cityObj.value.code
  cityConfig.value.cityAreaUnderConstructionStatisticsCity = cityObj.value.code
  cityConfig.value.projectBasicInfoCity = cityObj.value.code
  cityConfig.value.projectAnnualPresaleFundsSupervisionCity = cityObj.value.code
  cityConfig.value.housingenterprisesPetitionEventAbnormalSituationCity = cityObj.value.code

  mapList.value.forEach(x => {
    if (x.code === data.cityCode) {
      x.selected = true
      if (data.cancelCurrentCity) {
        x.selected = false
      }
    } else {
      x.selected = false
    }
  })

  initPage(cityObj.value.code);
}

const developerNameSearchRemoteMethod = (query, cb) => { // 年度预售资金监管情况-开发商名称-远程搜索
  getProMonitoringGetDevelopers({adcode: cityConfig.value.projectAnnualPresaleFundsSupervisionCity, projectName: query}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      const tempList = resData.map(x => {
        return {
          value: x
        }
      })
      cb(tempList)
    } else {
      cb([])
    }
  }).catch(error => {
    console.log(error);
    cb([])
  })
}

const searchDeveloperInfo = () => { // 年度预售资金监管情况-查询按钮-submit
  initProjectAnnualPresaleFundsSupervision(cityConfig.value.projectAnnualPresaleFundsSupervisionCity)
}

const publicInterval = (item) => { // bar-interval
  if (item.interval) {
    clearInterval(item.interval)
    item.interval = null
    item.currentBarIndex = 0
  }
  item.interval = setInterval(() => {
    if (item.currentBarIndex === 2) {
      item.currentBarIndex = 0
    } else {
      if (item.currentBarIndex < 3) {
        item.currentBarIndex++
      }
    }
  }, 10 * 1000)
}

const petitionEventReasonStatisticsChangeFiltrateTime = ({item}) => { // 信访事件原因统计-月范围时间筛选
  petitionEventReasonStatisticsTimeConfig.value = item
  initPetitionEventReasonStatisticsData(cityConfig.value.housingenterprisesPetitionEventAbnormalSituationCity)
}

const projectSafeEventStatisticsChangeFiltrateTime = ({item}) => { // 项目安全事件统计-月范围时间筛选
  projectSafeEventStatisticsTimeConfig.value = item
  initProjectSafeEventStatisticsData(cityConfig.value.housingenterprisesPetitionEventAbnormalSituationCity)
}

const housingEnterpriseProjectProgressAbnormalStatisticsChangeFiltrateTime = ({item}) => { // 房企项目进度异常统计-月范围时间筛选
  housingEnterpriseProjectProgressAbnormalStatisticsTimeConfig.value = item
  initHousingEnterpriseProjectProgressAbnormalStatisticsData(cityConfig.value.housingenterprisesPetitionEventAbnormalSituationCity)
}

const changeCity = (cityCode, type) => { // 模块切换城市
  switch(type) {
    case 'commercialHousingConstructionAreaStatistics': // 商品房开工面积统计
      cityConfig.value.commercialHousingConstructionAreaStatisticsCity = cityCode
      getCommercialHousingConstructionAreaStatisticsData(cityCode, housePropertySalesTrendNewSalesStatisticsTimeConfig.value)
      break;
    case 'stateLand': // 国有土地使用权出让面积及出让金总额统计
      cityConfig.value.stateLandCity = cityCode
      getStateLandData(cityCode, stateLandTimeConfig.value)
      break;
    case 'cityAreaUnderConstructionStatistics': // 各市在建面积统计
      cityConfig.value.cityAreaUnderConstructionStatisticsCity = cityCode
      getCityAreaUnderConstructionStatisticsData(cityCode, cityAreaUnderConstructionStatisticsTimeConfig.value)
      break;
    case 'projectBasicInfo': // 获取工程项目详情
      cityConfig.value.projectBasicInfoCity = cityCode
      getProjectDetail(cityCode)
      break;
    case 'projectAnnualPresaleFundsSupervision': // 获取年度预售资金监管情况
      cityConfig.value.projectAnnualPresaleFundsSupervisionCity = cityCode
      initProjectAnnualPresaleFundsSupervision(cityCode)
      break;
    case 'housingenterprisesPetitionEventAbnormalSituation': // 房企信访事件异常情况
      cityConfig.value.housingenterprisesPetitionEventAbnormalSituationCity = cityCode
      initMostPetitionEventDevelopersRanking(cityCode) // 房企信访事件异常情况-获取信访事件最多开发商排名
      initPetitionEventReasonStatisticsData(cityCode) // 房企信访事件异常情况-信访事件原因统计
      initProjectSafeEventStatisticsData(cityCode) // 房企信访事件异常情况-项目安全事件统计
      initHousingEnterpriseProjectProgressAbnormalStatisticsData(cityCode) // 房企信访事件异常情况-项目安全事件统计
      break;
  }
}

const initTableList = (cityCode, pageInfo) => { // 资金及流向异常情况-getdata
  getproMonitoringTrackFundFlowAnomalies({
    adcode: cityCode,
    pageSize: pageInfo.pageSize,
    pageNum: pageInfo.pageNum,
  }).then(res => {
    const resData = res?.data
    if (resData?.records?.length) {
      tableColumnData.value = [
        {
          label: '序号',
          key: 'index',
          width: 40
        },
        {
          label: '项目名称',
          key: 'xmmc'
        },
        {
          label: '资金流动比率',
          key: 'zjldbl'
        },
        {
          label: '预售款回笼率',
          key: 'yskhll'
        },
        {
          label: '项目账户余额',
          key: 'xmzhye'
        },
        {
          label: '应收账款',
          key: 'yszk'
        },
        {
          label: '应付账款',
          key: 'yfzk'
        },
        {
          label: '资金流入流出',
          key: 'zjlrlc'
        }
      ]
      tableListData.value = resData?.records?.map((x, i) => {
        return {
          ...x,
          index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1)
        }
      })
      tableInfo.value.total = resData?.total
      tableInfo.value.currentPage = pageInfo.pageNum
    } else {
      tableColumnData.value = []
      tableInfo.value.total = resData?.total
      tableInfo.value.currentPage = pageInfo.pageNum
    }
  }).catch(error => {
    console.log(error);
    tableColumnData.value = []
    tableInfo.value.total = 0
    tableInfo.value.currentPage = 1
  })
}

const changeTablePage = (page) => { // 年度预售资金监管情况-列表-切页
  initTableList(cityObj.value.code, { pageNum: page, pageSize: 10 }); // 资金及流向异常情况
}

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case 'bar': // 商品房开工面积统计-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h240 dialog-h240'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'singleLine': // 年度预售资金监管情况-line图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h240 dialog-h240'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barRanking': // 房企信访事件异常情况-信访事件最多开发商排名-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h220 dialog-h220',
        intervalData: { currentBarIndex: componentParams.currentBarIndex }
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'pie': // 信访事件原因统计/项目安全事件统计/房企项目进度异常统计-pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h220 dialog-h220',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const handleCityPermission = (cityCode) => { // 处理城市权限
  if (cityCode) {
    cityObj.value.code = cityCode
    Object.keys(cityConfig.value).forEach(x => {
      cityConfig.value[x] = cityCode
    })
  }
  if (cityCode !== '210000') { // 单市
    cityObj.value.name = mapList.value.find(x => x.code === cityCode)?.name
    mapList.value.forEach(x => {
      if (x.code === cityCode) {
        x.selected = true
      } else {
        x.select.disabled = true
      }
    })
  }
}

const initPage = (cityCode) => {
  getCommercialHousingConstructionAreaStatisticsData(cityCode, housePropertySalesTrendNewSalesStatisticsTimeConfig.value) // 商品房开工面积统计
  getStateLandData(cityCode, stateLandTimeConfig.value) // 国有土地使用权
  getCityAreaUnderConstructionStatisticsData(cityCode, cityAreaUnderConstructionStatisticsTimeConfig.value) // 各市在建面积统计
  getProjectDetail(cityCode) // 获取工程项目详情
  initTableList(cityCode, {pageNum: 1, pageSize: 10}) // 资金及流向异常情况
  initProjectAnnualPresaleFundsSupervision(cityCode) // 获取年度预售资金监管情况
  initMostPetitionEventDevelopersRanking(cityCode) // 获取信访事件最多开发商排名
  initPetitionEventReasonStatisticsData(cityCode) // 信访事件原因统计
  initProjectSafeEventStatisticsData(cityCode) // 项目安全事件统计
  initHousingEnterpriseProjectProgressAbnormalStatisticsData(cityCode) // 项目安全事件统计
}

onBeforeMount(() => {
  const permissionCityCode = localStorage.getItem('cityCode')
  if (permissionCityCode) handleCityPermission(permissionCityCode)
})

onMounted(() => {
  const date = new Date();
  currentYear.value = date.getFullYear();
  housePropertySalesTrendNewSalesStatisticsTimeConfig.value.startTime = currentYear.value - 1
  stateLandTimeConfig.value.startTime = currentYear.value - 1
  cityAreaUnderConstructionStatisticsTimeConfig.value.startTime = currentYear.value - 1
  const month = `${date.getMonth() + 1 > 9 ? '' : 0}${date.getMonth() + 1}`
  petitionEventReasonStatisticsTimeConfig.value = [`${Number(currentYear.value).toString()}-${month}`, `${Number(currentYear.value+1).toString()}-${month}`]
  projectSafeEventStatisticsTimeConfig.value = [`${Number(currentYear.value).toString()}-${month}`, `${Number(currentYear.value+1).toString()}-${month}`]
  housingEnterpriseProjectProgressAbnormalStatisticsTimeConfig.value = [`${Number(currentYear.value).toString()}-${month}`, `${Number(currentYear.value+1).toString()}-${month}`]
  initPage(cityObj.value.code);
})
</script>

<style scoped lang="less">
.common-chart {
  position: relative;
  background: rgba(12,40,93,0.4);
  border: 1px solid #6776AB;
  margin-top: 6px;
  flex: 1;
}

.common-filtrate-module {
  position: absolute;
  right: 5px;
  top: 10px;
  z-index: 1;
  /deep/ .el-date-editor--monthrange {
    width: 125px;
  }
}

.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/projectMonitoringAnalysis/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/projectMonitoringAnalysis/header-bg.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 46px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    position: relative;
    span {
      background: linear-gradient(to bottom, #FFFFFF, rgba(27, 67, 158, 1));
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .main-content-gird-title {
      background: url("@/assets/img/projectMonitoringAnalysis/module-title-bg.png");
      background-size: 100% 100%;
      position: relative;
      height: 43px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      p {
        margin-left: 50px;
        font-size: 18px;
      }
      .filtrate-city {
        top: 11px;
      }
    }

    .pubilc-chart-title {
      margin-top: 8px;
      font-size: 14px;
      font-weight: bold;
      padding-top: 2px;
    }

    .commercial-housing-construction-area-statistics {
      height: 305px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .commercial-housing-construction-area-statistics-chart {
        .common-chart;

        .filtrate-module {
          .common-filtrate-module;
        }
      }
    }

    .state-land {
      height: 305px;
      box-sizing: border-box;
      position: relative;
      margin-top: 20px;
      display: flex;
      flex-direction: column;

      .state-land-chart {
        .common-chart;

        .filtrate-module {
          .common-filtrate-module
        }
      }
    }

    .city-area-under-construction-statistics {
      height: 305px;
      box-sizing: border-box;
      position: relative;
      margin-top: 20px;
      display: flex;
      flex-direction: column;

      .city-area-under-construction-statistics-chart {
        .common-chart;

        .filtrate-module {
          .common-filtrate-module
        }
      }
    }

    .middle-map {
      height: 400px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }
    }

    .project-basic-info {
      margin-bottom: 10px;
      padding-top: 30px;
      position: relative;
      .filtrate-city {
        top: -5px;
        right: 0;
      }
      .col-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .el-image {
          width: 176px;
          height: 129px;
        }
        .label {
          font-size: 22px;
          margin: 10px 0;
        }
        .value {
          font-size: 30px;
          background: linear-gradient(to bottom, #FFFFFF, #ECAE69);
          color: transparent;
          -webkit-background-clip: text;
          background-clip: text;
        }
      }
    }
    .money-and-flow-anomalies {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .money-and-flow-anomalies-list {
        margin-top: 8px;
        height: 230px;
        /deep/ .table-row {
          height: 40px;
        }
      }
    }

    .project-annual-presale-funds-supervision {
      box-sizing: border-box;
      height: 300px;
      position: relative;
      display: flex;
      flex-direction: column;

      .project-annual-presale-funds-supervision-chart {
        .common-chart;

        .developer-name-search {
          width: 200px;
          position: absolute;
          right: 10px;
          top: 10px;
          display: flex;
          align-items: center;
          z-index: 1;

          /deep/ .developer-name-search-autocomplete {
            width: 200px;
            margin-left: 0px;

            .el-input__wrapper {
              min-height: 20px;
              height: 20px;
              background: #001A35;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 10px;
              border: 1px solid #03DBFF;
              padding-right: 35px;

              .el-input__inner {
                color: white;
              }
              .el-input__suffix .el-icon {
                color: white;
              }
            }
          }

          .developer-name-search-btn {
            position: absolute;
            right: 8px;
            color: #00FBFF;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
    }

    .housing-enterprises-petition-event-abnormal-situation {
      box-sizing: border-box;
      margin-top: 20px;
      height: 634px;
      position: relative;
      display: flex;
      flex-direction: column;

      .housing-enterprises-petition-event-abnormal-situation-chart {
        padding: 10px;
        .common-chart;
      }
    }

    .most-petition-event-developers-ranking {
      margin-top: 20px;
    }

    .public-pie {
      margin-top: 20px;
      &-month-range {
        position: absolute;
        right: 0;
        top: 0;
        width: 142px;
      }
    }

    .public-pie {
      .pubilc-chart-title {
        margin-bottom: 20px;
      }
    }
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>
<style lang="less">
.developer-name-search-autocomplete-popper {
  li {
  color: white;
  }
  li:hover {
  background-color: #368CF2;
  }
}
</style>